<template>
  <header class="header-area">
        <div class="container">
            <div class="header-wrapper d-flex align-items-center justify-content-between">
                <!--header-logo-->
                <div class="header-logo">
                    <router-link to="/" style="font-size:16px">
                        <img :src="brandInfo.LogoPath"/>{{brandInfo.EnterpriseName}}
                    </router-link>
                </div>
                <!-- menu-bar -->
                <div class="menu-bar">
                    <ul class="d-flex align-items-center justify-content-between">
                        <!-- <li><router-link to="/">首页</router-link></li> -->
                        <li v-for="dt in meuns" :key="dt.Id"><router-link :to="dt.Link || '/error'">{{dt.SettingName}}</router-link></li>
                        <!-- <li><router-link to="/reserve">预约</router-link></li>
                        <li><router-link to="/info/1">信息1</router-link></li>
                        <li><router-link to="/info/2">信息2</router-link></li>
                        <li><router-link to="/info/3">信息3</router-link></li>
                        <li><router-link to="/info/4">信息4</router-link></li> -->
                    </ul>
                </div>
                <!-- sign-in area -->
                <div class="sign-in-area">
                    <ul class="d-flex align-items-center justify-content-between">
                        <li class="popup"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                viewBox="0 0 16 16">
                                <path id="Path_1" data-name="Path 1"
                                    d="M15.8,14.865l-4.55-4.55a6.345,6.345,0,1,0-.943.943l4.55,4.55a.667.667,0,1,0,.943-.943ZM6.333,11.336a5,5,0,1,1,5-5A5.005,5.005,0,0,1,6.333,11.336Z"
                                    transform="translate(0 -0.003)" fill="#070615"></path>
                            </svg></li>
                        <li class="dark-light"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                viewBox="0 0 16 16">
                                <g id="Group_18" data-name="Group 18" transform="translate(-1677 -57)">
                                    <circle id="Ellipse_4" data-name="Ellipse 4" cx="8" cy="8" r="8"
                                        transform="translate(1677 57)" fill="#070615"></circle>
                                    <g id="moon" transform="translate(1663.354 60)">
                                        <g id="Group_17" data-name="Group 17" transform="translate(16.646)">
                                            <path id="Path_27" data-name="Path 27"
                                                d="M26.1,7.409a.342.342,0,0,0-.38-.106,3.61,3.61,0,0,1-1.222.205A3.752,3.752,0,0,1,22.386.651a.341.341,0,0,0-.143-.62A3.313,3.313,0,0,0,21.765,0a5.119,5.119,0,1,0,4.359,7.8A.344.344,0,0,0,26.1,7.409Z"
                                                transform="translate(-16.646 0)" fill="#fff"></path>
                                        </g>
                                    </g>
                                </g>
                            </svg></li>
                        <li class="sign-click relative">Sign in
                            <!-- sign-in dropdawn -->
                            <div class="sign-in-card">
                                <h3>Welcome back.</h3>
                                <p>Sign in to get personalized story recommendations, ollow authors and topics you love,
                                    and interact with stories.</p>
                                <div class="input-group-icon radious-6 mb-30">
                                    <input type="email" placeholder="Type your email...">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                        <path id="Path_16" data-name="Path 16"
                                            d="M9.59,13H3a1,1,0,0,1,0-2H9.59l-.3-.29a1,1,0,0,1,1.42-1.42l2,2a1,1,0,0,1,0,1.42l-2,2a1,1,0,1,1-1.42-1.42ZM19,2H9A3,3,0,0,0,6,5V8A1,1,0,0,0,8,8V5A1,1,0,0,1,9,4H19a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V5A3,3,0,0,0,19,2Z"
                                            transform="translate(-2 -2)" fill="#ffaf29"></path>
                                    </svg>
                                </div>
                                <div class="sign-link">
                                    <p>Don't have an account?</p>
                                    <a href="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0716-31/index.html#">Sign Up</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <!--mobile menu icon-->
                            <div class="menu-toggole">
                                <span class="menu-show comon-tab">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 384.97 384.97"
                                        style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
                                        <g>
                                            <g id="Menu_1_">
                                                <path
                                                    d="M12.03,120.303h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03 c-6.641,0-12.03,5.39-12.03,12.03C0,114.913,5.39,120.303,12.03,120.303z">
                                                </path>
                                                <path
                                                    d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03 S379.58,180.455,372.939,180.455z">
                                                </path>
                                                <path
                                                    d="M372.939,264.667H132.333c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h240.606 c6.641,0,12.03-5.39,12.03-12.03C384.97,270.056,379.58,264.667,372.939,264.667z">
                                                </path>
                                            </g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                        </g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                    </svg>
                                </span>
                                <span class="menu-close comon-tab">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 241.171 241.171"
                                        style="enable-background:new 0 0 241.171 241.171;" xml:space="preserve">
                                        <g>
                                            <path id="Close"
                                                d="M138.138,120.754l99.118-98.576c4.752-4.704,4.752-12.319,0-17.011c-4.74-4.704-12.439-4.704-17.179,0l-99.033,98.492L21.095,3.699c-4.74-4.752-12.439-4.752-17.179,0c-4.74,4.764-4.74,12.475,0,17.227l99.876,99.888L3.555,220.497c-4.74,4.704-4.74,12.319,0,17.011c4.74,4.704,12.439,4.704,17.179,0l100.152-99.599l99.551,99.563c4.74,4.752,12.439,4.752,17.179,0c4.74-4.764,4.74-12.475,0-17.227L138.138,120.754z">
                                            </path>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                            <g></g>
                                        </g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                        <g></g>
                                    </svg>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- menu search popup -->
        <div class="search-popup-area">
            <div class="search-option">
                <div class="search-box">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path id="Path_1" data-name="Path 1"
                            d="M15.8,14.865l-4.55-4.55a6.345,6.345,0,1,0-.943.943l4.55,4.55a.667.667,0,1,0,.943-.943ZM6.333,11.336a5,5,0,1,1,5-5A5.005,5.005,0,0,1,6.333,11.336Z"
                            transform="translate(0 -0.003)" fill="#070615"></path>
                    </svg>
                    <input id="search" name="search" type="text" data-list=".data-list"
                        placeholder="Type your keywords...">
                </div>
                <div class="data-list-wrapper">
                    <ul class="data-list">
                        <li>
                            <a href="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0716-31/index.html">
                                <div class="search-content">
                                    <div class="search-title">
                                        <h4>Ingredients to look for in skin care products <span>April 30, 2019</span>
                                        </h4>
                                    </div>
                                    <p>Read our top seven health benefits of fishing to learn why, whether you're a
                                        match angler or a weekend hobbyist.</p>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
                                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                    <path style="fill:#2196F3;"
                                        d="M511.189,259.954c1.649-3.989,0.731-8.579-2.325-11.627l-192-192  c-4.237-4.093-10.99-3.975-15.083,0.262c-3.992,4.134-3.992,10.687,0,14.82l173.803,173.803H10.667  C4.776,245.213,0,249.989,0,255.88c0,5.891,4.776,10.667,10.667,10.667h464.917L301.803,440.328  c-4.237,4.093-4.355,10.845-0.262,15.083c4.093,4.237,10.845,4.354,15.083,0.262c0.089-0.086,0.176-0.173,0.262-0.262l192-192  C509.872,262.42,510.655,261.246,511.189,259.954z">
                                    </path>
                                    <path
                                        d="M309.333,458.546c-5.891,0.011-10.675-4.757-10.686-10.648c-0.005-2.84,1.123-5.565,3.134-7.571L486.251,255.88  L301.781,71.432c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.992,10.687-3.992,14.82,0l192,192  c4.164,4.165,4.164,10.917,0,15.083l-192,192C314.865,457.426,312.157,458.546,309.333,458.546z">
                                    </path>
                                    <path
                                        d="M501.333,266.546H10.667C4.776,266.546,0,261.771,0,255.88c0-5.891,4.776-10.667,10.667-10.667h490.667  c5.891,0,10.667,4.776,10.667,10.667C512,261.771,507.224,266.546,501.333,266.546z">
                                    </path>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0716-31/index.html">
                                <div class="search-content">
                                    <div class="search-title">
                                        <h4>Sky Parachute Adventure <span>April 25, 2019</span></h4>
                                    </div>
                                    <p>Muay Thai (Thai boxing) is the most popular contact sport in Thailand, and a
                                        pillar of Thai culture, so much so that for years the Thai government has been
                                        asking, unsuccessfully, for it to be included as an Olympic sport. </p>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
                                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                    <path style="fill:#2196F3;"
                                        d="M511.189,259.954c1.649-3.989,0.731-8.579-2.325-11.627l-192-192  c-4.237-4.093-10.99-3.975-15.083,0.262c-3.992,4.134-3.992,10.687,0,14.82l173.803,173.803H10.667  C4.776,245.213,0,249.989,0,255.88c0,5.891,4.776,10.667,10.667,10.667h464.917L301.803,440.328  c-4.237,4.093-4.355,10.845-0.262,15.083c4.093,4.237,10.845,4.354,15.083,0.262c0.089-0.086,0.176-0.173,0.262-0.262l192-192  C509.872,262.42,510.655,261.246,511.189,259.954z">
                                    </path>
                                    <path
                                        d="M309.333,458.546c-5.891,0.011-10.675-4.757-10.686-10.648c-0.005-2.84,1.123-5.565,3.134-7.571L486.251,255.88  L301.781,71.432c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.992,10.687-3.992,14.82,0l192,192  c4.164,4.165,4.164,10.917,0,15.083l-192,192C314.865,457.426,312.157,458.546,309.333,458.546z">
                                    </path>
                                    <path
                                        d="M501.333,266.546H10.667C4.776,266.546,0,261.771,0,255.88c0-5.891,4.776-10.667,10.667-10.667h490.667  c5.891,0,10.667,4.776,10.667,10.667C512,261.771,507.224,266.546,501.333,266.546z">
                                    </path>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0716-31/index.html">
                                <div class="search-content">
                                    <div class="search-title">
                                        <h4>Small boy and girl on road<span>April 18, 2019</span></h4>
                                    </div>
                                    <p>Many parents are tired of the pink and blue divide in the toy aisles. Just last
                                        month, the White House held a conference in toys and media, with many toy
                                        manufacturers and experts attending. After feedback, Target announced in 2015
                                        that it would get rid of signs labeling toys for boys or for girls</p>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
                                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                    <path style="fill:#2196F3;"
                                        d="M511.189,259.954c1.649-3.989,0.731-8.579-2.325-11.627l-192-192  c-4.237-4.093-10.99-3.975-15.083,0.262c-3.992,4.134-3.992,10.687,0,14.82l173.803,173.803H10.667  C4.776,245.213,0,249.989,0,255.88c0,5.891,4.776,10.667,10.667,10.667h464.917L301.803,440.328  c-4.237,4.093-4.355,10.845-0.262,15.083c4.093,4.237,10.845,4.354,15.083,0.262c0.089-0.086,0.176-0.173,0.262-0.262l192-192  C509.872,262.42,510.655,261.246,511.189,259.954z">
                                    </path>
                                    <path
                                        d="M309.333,458.546c-5.891,0.011-10.675-4.757-10.686-10.648c-0.005-2.84,1.123-5.565,3.134-7.571L486.251,255.88  L301.781,71.432c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.992,10.687-3.992,14.82,0l192,192  c4.164,4.165,4.164,10.917,0,15.083l-192,192C314.865,457.426,312.157,458.546,309.333,458.546z">
                                    </path>
                                    <path
                                        d="M501.333,266.546H10.667C4.776,266.546,0,261.771,0,255.88c0-5.891,4.776-10.667,10.667-10.667h490.667  c5.891,0,10.667,4.776,10.667,10.667C512,261.771,507.224,266.546,501.333,266.546z">
                                    </path>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="http://demo.mxyhn.xyz:8020/cssthemes6/skk-0716-31/index.html">
                                <div class="search-content">
                                    <div class="search-title">
                                        <h4>Colorful women digital art face<span>April 21, 2019</span></h4>
                                    </div>
                                    <p>The first thing I do before starting an illustration is to browse through my
                                        folder of inspiration. Inside are plenty of sub-folders, containing images of
                                        lighting, faces, human figures, clothing, illustrations from my favourite
                                        artists, animals, caterpillars, flowers and plenty more besides.</p>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512"
                                    style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                    <path style="fill:#2196F3;"
                                        d="M511.189,259.954c1.649-3.989,0.731-8.579-2.325-11.627l-192-192  c-4.237-4.093-10.99-3.975-15.083,0.262c-3.992,4.134-3.992,10.687,0,14.82l173.803,173.803H10.667  C4.776,245.213,0,249.989,0,255.88c0,5.891,4.776,10.667,10.667,10.667h464.917L301.803,440.328  c-4.237,4.093-4.355,10.845-0.262,15.083c4.093,4.237,10.845,4.354,15.083,0.262c0.089-0.086,0.176-0.173,0.262-0.262l192-192  C509.872,262.42,510.655,261.246,511.189,259.954z">
                                    </path>
                                    <path
                                        d="M309.333,458.546c-5.891,0.011-10.675-4.757-10.686-10.648c-0.005-2.84,1.123-5.565,3.134-7.571L486.251,255.88  L301.781,71.432c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.992,10.687-3.992,14.82,0l192,192  c4.164,4.165,4.164,10.917,0,15.083l-192,192C314.865,457.426,312.157,458.546,309.333,458.546z">
                                    </path>
                                    <path
                                        d="M501.333,266.546H10.667C4.776,266.546,0,261.771,0,255.88c0-5.891,4.776-10.667,10.667-10.667h490.667  c5.891,0,10.667,4.776,10.667,10.667C512,261.771,507.224,266.546,501.333,266.546z">
                                    </path>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                    <g>
                                    </g>
                                </svg>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="popup-close-icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px"
                    y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;"
                    xml:space="preserve">
                    <g>
                        <g>
                            <path
                                d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717    L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859    c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287    l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285    L284.286,256.002z">
                            </path>
                        </g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>
            </div>
        </div>
    </header>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data(){
        return{
            meuns:[]
        }
    },
    computed: {
        ...mapGetters({
            brandInfo: "merchant/brandInfo",
        }),
    },
    async created(){
        // 获取菜单
        // this.$store.dispatch('merchant/get_menu',{
        //     //SettingCode: "Yooo_Systemmenu",
        //     PageSize: 200
        // }).then(res =>{
        //     const menuItems = res.IsSuccess && res.Data.SysConfigInfos
        //     for(let i=0;i<menuItems.length;i++){
        //         if(menuItems[i].SettingCode == 'Yooo_Menu'){
        //             this.meuns.push(menuItems[i])
        //         }
        //     }
        // })

        this.$store.dispatch('merchant/get_menu_by_parant_code',{
            SettingCode: 'Yooo_Menu'
        }).then(res =>{
            this.meuns = res.Data || []
        })
        this.$store.dispatch('merchant/get_brand_info',{})
    }
}
</script>

<style lang="scss">
    .header-logo{
        img{
            float: left;
            width: 50px;
            margin: 0 10px 0 0;
        }
    }
</style>